<template>
	<li class="list-wrapper">
		<div class="name"  @click="dataPreview">
            <span class="data-type-icon">
                <i class="iconfont" :class="dataIcon"></i>
            </span>
            {{data.name}}
        </div>
		<!-- <div class="data-count">{{data.count}}</div> -->
		<div class="date">{{(data.updatedAt || data.createdAt) | timeFormat}}</div>
		<div class="data-option">	

            <div @click.stop="copyUid" class="copy">
                <i class="iconfont icon-copy large" title="复制数据UID"></i>
            </div>
            
            <!-- <div @click.stop="addStar" class="star" v-if="type != 'star'">
                <i class="iconfont icon-star large" title="收藏"></i>
            </div> -->

			<!-- <template v-if="isPrivate && type !== 'group' && type !== 'star'">

                <div class="share" @click.stop="share" >
                    <i class="iconfont icon-share mid" title="分享"></i>
                </div>

            </template> -->

			<div class="chain" >
                <i class="iconfont icon-menu large" @click.stop="toggleMenu('menu')" @blur="closeMenu" tabindex="-1"></i>

                <!--注意，通过toggleMenu控制的菜单，其内部的所有点击事件一定要使用onmousedown来触发，否则blur事件会先于click执行-->
                <div class="chain-option-container"  :class="{'is-private':isPrivate}" v-show="currentMenu === uid+'_menu'">
                    <div @mousedown="dataPreview">
                        <div class="option-icon"><i class="iconfont icon-data-preview"></i></div>
                         数据预览
                    </div>
                    <div @mousedown="openWithDataViz" target="_blank">
                        <div class="option-icon"><i class="iconfont icon-dataviz"></i></div>
                         数据上图
                    </div>
                    <div  v-if="(role==='admin' || isPrivate) && !(type === 'star' || type === 'group')"  class="delete" @mousedown="removeData()">
                        <div class="option-icon"><i class="iconfont icon-delete"></i></div>
                         删除数据
                    </div>
                    <div  v-if="type === 'star'" class="delete" @mousedown="moveOutStore()">
                        <div class="option-icon"><i class="iconfont icon-delete"></i></div>
                         移出收藏
                    </div>
                </div>
            </div>
		</div>
	</li>
</template>

<script>

	import mixin from './data-page.js'

	export default{
		
		mixins: [mixin],
		name: 'imagery-list-wrapper',
		
    }
</script>

<style lang="scss">

	@import 'common';

	li.list-wrapper:nth-child(1), li.list-wrapper:nth-child(2) {

		>.data-option{
			.chain {
				.chain-option-container {

					bottom: auto !important;
					top: 30px !important;
    				// right: 4px !important;

		       		&::before{
		                content: "";
		                width: 0;
		                height: 0;
		                position: absolute;
		                left: 52px;
		                top: -10px;
		                border-top: none; 
		                border-bottom: solid 10px #d4d8db;
		                border-left: solid 8px transparent;
		                border-right: solid 8px transparent;
		            }

		            &::after{
		                content: "";
		                width: 0;
		                height: 0;
		                position: absolute;
		                left: 54px;
		                top: -8px;
		                border-top: none; 
		                border-bottom: solid 8px white;
		                border-left: solid 6px transparent;
		                border-right: solid 6px transparent;
		            }
		       	}
			}

			.download {
                .download-option-container{

                	bottom: auto !important;
					top: 30px !important;

                	&::before{
		                content: "";
		                width: 0;
		                height: 0;
		                position: absolute;
		                left: 24px;
                        top: -10px;
		                border-top: none; 
		                border-bottom: solid 10px #d4d8db;
		                border-left: solid 8px transparent;
		                border-right: solid 8px transparent;
		            }

		            &::after{
		                content: "";
		                width: 0;
		                height: 0;
		                position: absolute;
		                left: 26px;
                        top: -8px;
		                border-top: none; 
		                border-bottom: solid 8px white;
		                border-left: solid 6px transparent;
		                border-right: solid 6px transparent;
		            }
                }
            }
		}
       	
    }
	
	.list-wrapper {

        font-size: 14px;
		border-bottom: 1px solid $bdGray;
		height: 50px;
		padding: 8px 0;
		line-height: 34px;
		margin: 0 15px;
        color: $deepGray;

		>div {
			float: left;
    		height: 100%;
    		text-align: center;
		}

		>.name {
    		width: 35%;
    		text-align: left;
    		padding: 0 4px 0 24px;
    		overflow: hidden;
            position: relative;
    		@include text-overflow();
            cursor: pointer;

            &:hover {
                color: $primary;
            }

            .data-type-icon {
                position: absolute;
                left: 0;
                top: 9px;
                width: 17px;
                height: 16px;
                border-radius: 3px;
                line-height: 16px;
                text-align: center;

                >i {
                    color: $lightGray;
                }
            }
    	}

    	>.data-count {
    		width: 10%;
    		text-align: right;
    	}

    	>.date {
    		width: 25%;
            text-align: right;
    	}

    	// >.data-option {
    	// 	width: 25%;

    	// 	>i {
    	// 		font-size: 14px;
    	// 		margin-left: 6px;
    	// 		color: $gray;
    	// 		cursor: pointer;
    	// 	}

    	// 	.icon-brush_fill:hover {
    	// 		color: $info;
    	// 	}

    	// 	.icon-delete:hover {
    	// 		color: $danger;
    	// 	}
    	// }
    	>.data-option{
            width: 30%;
            position: relative;

            >div{
                // float: right;
                position: relative;
                display: inline-block;
                margin-left: 2px;
                text-align: center;
                height: 20px;
                width: 20px;
                line-height: 20px;
                cursor: pointer;


                >i{
                    outline: none;
                    color: $lightGray;
                }

            }

            .large{
                font-size: 14px;
            }

            .mid {
                font-size: 13px;
            }

            .chain {
                
                .chain-option-container{
                    // overflow: hidden;
                    position: absolute;
                    z-index: 9;
                    width: 92px;
                    background-color: $bgWhite;
                    border-radius: $bdRadius;
					bottom: 30px;
    				right: -20px;
                    border: 1px solid $bdGray;
                    text-align: left;
                    color: $gray;
                    padding: 6px 0;

                    i {
                        font-size: 14px;
                        width: 18px;
                    }

                    >div {
                        padding: 4px 8px;
                        cursor: pointer;
                        white-space: nowrap;

                        &:hover{
                            color: $deepGray;
                            background-color: #e8eef6;
                        }
                    }

                    .delete{
                        color: $danger;

                        &:hover{
                            color: $danger !important;
                            background-color: #e8eef6;
                        }
                    }

                    .option-icon{
                        width: 18px;
                        text-align: center;
                        float: left;
                        margin-right: 6px;
                    }

                    &::before{
                        content: "";
                        width: 0;
                        height: 0;
                        position: absolute;
                        left: 52px;
                        bottom: -10px;
                        border-top: solid 10px #d4d8db;
                        border-left: solid 8px transparent;
                        border-right: solid 8px transparent;
                    }

                    &::after{
                        content: "";
                        width: 0;
                        height: 0;
                        position: absolute;
                        left: 54px;
                        bottom: -8px;
                        border-top: solid 8px white;
                        border-left: solid 6px transparent;
                        border-right: solid 6px transparent;
                    }

                }

                .icon-menu:hover {
                    font-weight: 500;
                    color: $primary;
                }

                .icon-menu:focus {
                    font-weight: 500;
                    color: $primary;
                }
            }

            .download {
                .download-option-container{
                    // overflow: hidden;
                    position: absolute;
                    z-index: 9;
                    background-color: $bgWhite;
                    border-radius: $bdRadius;
                    bottom: 30px;
                    left: -24px;
                    color: $gray;
                    border: 1px solid $bdGray;

                    .shapefile-download:hover {
                        .shp-sub-option-container-wrapper {
                            padding: 16px;
                            display: block;
                        }
                    }

                    .csv-download:hover {
                        .csv-sub-option-container-wrapper {
                            padding: 16px;
                            display: block;
                        }
                    }

                    >div {
                        padding: 4px 6px;
                        cursor: pointer;
                        white-space:nowrap;

                        &:hover{
                            background-color: #e8eef6;
                        }
                    }

                    &::before{
                        content: "";
                        width: 0;
                        height: 0;
                        position: absolute;
                        left: 24px;
                        bottom: -10px;
                        border-top: solid 10px #d4d8db;
                        border-left: solid 8px transparent;
                        border-right: solid 8px transparent;
                    }

                    &::after{
                        content: "";
                        width: 0;
                        height: 0;
                        position: absolute;
                        left: 26px;
                        bottom: -8px;
                        border-top: solid 8px white;
                        border-left: solid 6px transparent;
                        border-right: solid 6px transparent;
                    }
                }

                .shp-sub-option-container-wrapper {
                    display: none;
                    position: absolute;
                    left: -80px;
                    top: -16px;
                    z-index: 99;
                    .shp-sub-option-container {
                        height: auto;
                        padding: 6px;
                        background-color: #fff;
                        border-radius: 4px;
                        border: 1px solid #ddd;
                    }
                }

                .csv-sub-option-container-wrapper {
                    z-index: 99;
                    display: none;
                    position: absolute;
                    left: -80px;
                    top: 10px;
                    .csv-sub-option-container {
                        height: auto;
                        padding: 6px;
                        background-color: #fff;
                        border-radius: 4px;
                        border: 1px solid #ddd;
                    }
                }

                .icon-loading{
                    font-size: 16px;
                    margin-left: 3px;
                }

                .icon-download:hover {
                    font-weight: 500;
                    color: $primary;
                }

                .icon-download:focus {
                    font-weight: 500;
                    color: $primary;
                }
            }

            .share,.copy,.star {
                >i:hover {
                    font-weight: 500;
                    color: $primary;
                }
            }
        }
	}
	
</style>